<SettingsLayout page='settings/hotkeys' label="{intl.hotkeys}">
  <h1>{intl.hotkeys}</h1>

  <h2 class="sr-only">{intl.preferences}</h2>
  <form class="ui-settings" aria-label="{intl.hotkeySettings}">
    <label class="setting-group {allowChangeHotkeySetting ? '' : 'disabled-style'}">
      <input type="checkbox" id="choice-disable-hotkeys"
             bind:checked="$disableHotkeys"
             on:change="onChange()"
             disabled={!allowChangeHotkeySetting}
      >
      {intl.disableHotkeys}
    </label>
    <label class="setting-group  {allowChangeLeftRightSetting ? '' : 'disabled-style'}">
      <input type="checkbox" id="choice-left-right-focus"
             bind:checked="$leftRightChangesFocus"
             on:change="onChange()"
             disabled={!allowChangeLeftRightSetting}
      >
      {intl.leftRightArrows}
    </label>
  </form>

  <h2 class="sr-only">{intl.guide}</h2>

  <ShortcutHelpInfo />
</SettingsLayout>
<UISettingsStyles />
<style>
  .ui-settings {
    margin-bottom: 20px;
  }

  label.disabled-style {
    color: var(--deemphasized-text-color);
  }
</style>
<script>
  import SettingsLayout from '../../_components/settings/SettingsLayout.html'
  import ShortcutHelpInfo from '../../_components/ShortcutHelpInfo.html'
  import { store } from '../../_store/store.js'
  import { isKaiOS } from '../../_utils/userAgent/isKaiOS.js'
  import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'

  export default {
    store: () => store,
    data: () => ({
      allowChangeHotkeySetting: !isKaiOS() // In general KaiOS users cannot change this because they need the hotkeys
    }),
    computed: {
      allowChangeLeftRightSetting: ({ $disableHotkeys }) => (
        !$disableHotkeys && !isKaiOS()
      )
    },
    methods: {
      onChange () {
        this.store.save()
      }
    },
    components: {
      SettingsLayout,
      ShortcutHelpInfo,
      UISettingsStyles
    }
  }
</script>
